<template>
  <div>
    <el-row :gutter="20">
      <el-col>
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
          <el-form :inline="true" :size="size" :model="filters">
            <el-form-item>
              <el-date-picker
                v-model="filters.dateTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select v-model="filters.channel" clearable placeholder="渠道">
                <el-option label="BBC" value="1"></el-option>
                <el-option label="天猫" value="2"></el-option>
                <el-option label="京东" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="filters.shopId" clearable placeholder="地址类型">
                <el-option label="收货地址" value="1"></el-option>
                <el-option label="下单地址" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="filters.index" clearable placeholder="地址类型">
                <el-option label="成交订单金额" value="1"></el-option>
                <el-option label="成交订单数" value="2"></el-option>
                <el-option label="成交客户数" value="3"></el-option>
              </el-select>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <kt-button
                icon="fa fa-search"
                :label="$t('action.search')"
                type="primary"/>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="myChartChina" style="width: 100%; height: 500px"></div>
      </el-col>
      <el-col :span="12">
        <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col>
        <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          :default-sort = "{prop: 'id', order: 'descending'}"
          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
          style="width: 100%; margin-top: 20px">
          <el-table-column prop="id" label="区域" width="180" ></el-table-column>
          <el-table-column prop="name" label="成交订单金额" sortable>

          </el-table-column>
          <el-table-column prop="amount1" label="成交订单数" sortable></el-table-column>
          <el-table-column prop="amount2" label="成交订单客户数" sortable></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import china from '../../../../static/json/china';
  import KtButton from "@/views/Core/KtButton";
  import ContractList from "../../Paje/ContractList";
  export default {
    components: {
      KtButton
    },
    data() {
      return {
        size: "small",
        filters: {
          dateTime: "",
          shopId: "",
          channel: "",
          index: ""
        },
        tableData: [
          {
            id: '全国',
            name: '合计 : 2580107',
            amount1: '合计 : 319',
            amount2: '合计 : 39',
          }, {
            id: '全国',
            name: 'BBC : 1268070',
            amount1: 'BBC : 125',
            amount2: 'BBC : 19',
          }, {
            id: '全国',
            name: '天猫 : 681807',
            amount1: '天猫 : 114',
            amount2: '天猫 : 12',
          }, {
            id: '全国',
            name: '京东 : 630230',
            amount1: '京东 : 80',
            amount2: '京东 : 8',
          }
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    mounted() {
      this.drawMap();
      this.$echarts.registerMap('china', china);
      this.drawLine();
    },
    methods: {
      // 中国地图
      drawMap(){
        // 基于准备好的dom，初始化echarts实例
        let myChartContainer = document.getElementById('myChartChina');
        let myChartChina = this.$echarts.init(myChartContainer);
        // 绘制图表
        let optionMap = {
          tooltip: {},
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          visualMap: {
            min: 0,
            max: 1000000,
            left: '0%',
            top: 'bottom',
            text: ['高','低'],
            calculable : true,
            color:['#0b50b9','#c3e2f4']
          },
          selectedMode: 'single',
          series : [
            {
              name: '',
              type: 'map',
              mapType: 'china',
              itemStyle: {
                normal:{
                  borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              showLegendSymbol: true,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data:[
                {name: '上海',value: 1580107 },
                {name: '北京',value: 1534873 }
                // {name: '天津',value: 0 },
                // {name: '重庆',value: 2 },
                // {name: '河北',value: 2 },
                // {name: '河南',value: 2 },
                // {name: '云南',value: 2 },
                // {name: '辽宁',value: 2 },
                // {name: '黑龙江',value: 2 },
                // {name: '湖南',value: 2 },
                // {name: '安徽',value: 2 },
                // {name: '山东',value: 2 },
                // {name: '新疆',value: 2 },
                // {name: '江苏',value: 2 },
                // {name: '浙江',value: 2 },
                // {name: '江西',value: 2 },
                // {name: '湖北',value: 2 },
                // {name: '广西',value: 2 },
                // {name: '甘肃',value: 2 },
                // {name: '山西',value: 2 },
                // {name: '内蒙古',value: 2 },
                // {name: '陕西',value: 2 },
                // {name: '吉林',value: 2 },
                // {name: '福建',value: 2 },
                // {name: '贵州',value: 2 },
                // {name: '广东',value: 2 },
                // {name: '青海',value: 2 },
                // {name: '西藏',value: 2 },
                // {name: '四川',value: 2 },
                // {name: '宁夏',value: 2 },
                // {name: '海南',value: 2 },
                // {name: '台湾',value: 2 },
                // {name: '香港',value: 2 },
                // {name: '澳门',value: 2 }
              ]
            }
          ]
        }
        let timesRun = 0;
        let interval = setInterval(function () {
          timesRun += 1;
          if (timesRun === 10) {
            clearInterval(interval);
          }
          myChartChina.setOption(optionMap);
        }, 100);

        window.onresize=function(){
          myChartChina.resize();
        }
      },
      // 柱状图
      drawLine() {
        let myChartContainer = document.getElementById('myChart');
        let myChartChina = this.$echarts.init(myChartContainer);
        let option = {
          title: {
            text: '成交订单金额',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            name: "单位: 元",
            type: 'category',
            data: ['北京', '上海']
          },
          series: [
            {
              name: 'BBC',
              type: 'bar',
              data: [1268070, 2580107]
            },
            {
              name: '天猫',
              type: 'bar',
              data: [681807, 1268070]
            },{
              name: '京东',
              type: 'bar',
              data: [1268070, 681807]
            }
          ]
        };
        myChartChina.setOption(option);
      },
      //跨行跨列列表
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) { // 第一列
          if (rowIndex % 4 === 0) { // 第一行
            return {
              rowspan: 4,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },

    }
  }
</script>

<style scoped>

</style>
